<template>
  <!-- 
  <div ref="box" class="wraps">
    <div>
      <div class="item" v-for="i in chatList">
        <div>{{ i.name }}</div>
        <div>{{ i.message }}</div>
      </div>
    </div>
  </div>

  <div class="ipt">
    <div>
      <textarea type="text" v-model="ipt" />
    </div>
    <div>
      <button @click="send">send</button>
    </div>
  </div>
 -->

</template>

<script setup lang='ts'>
import { ref, nextTick } from 'vue';
let chatList = ref([
  { name: 'Tom', message: 'Hello, Vue3!' },
]);

let box = ref<HTMLDivElement>()
let ipt = ref('')

// 
const send = async () => {
  chatList.value.push({ name: 'Me', message: ipt.value });
  // nextTick(() => {
  // box.value!.scrollTop = 99999
  // })

  await nextTick()
  box.value!.scrollTop = 99999
  // !非空断言
}

</script>
<style scoped>
.wraps {
  margin: 10px auto;
  width: 500px;
  height: 400px;
  overflow: auto;
  overflow-x: hidden;
  background: wheat;
  border: 1px solid #ccc;

}

.item {
  width: 100%;
  height: 50px;
  background: #ccc;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid #fff;
}
</style>